<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>优惠券详情</title>
  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="black" name="apple-mobile-web-app-status-bar-style" />
  <meta content="telephone=no" name="format-detection"/>
  <link href="/css/couponDetails.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <div class="topnav">
        <div class="top" onclick="isshowStroe()">
            <p class='storeName'>眼管家</p>
            <p class="a-link"></p>
        </div>
        <div class="storelist">
            <p onclick="checkStroe(event)">全部可用</p>
            <p onclick="checkStroe(event)">眼管家</p>
        </div>
        <div class="mask" onclick="isshowStroe()">

            
        </div>
        <div class="title">
            <div class="active" onclick="ifInvalid('Valid')" >有效</div>
            <div onclick="ifInvalid('ifInvalid')">失效</div> 
        </div>
    </div>

    <div class="main">
        

        <div class="Valid">
            <div class="coupon-list">
                <div class="left">
                    <p><span>￥</span><span>45.00</span></p>
                    <p>无使用门槛</p>
                </div>
                <div class="split">
                    <div class="line"></div>
                    <!-- <div class="split-right"></div> -->
                </div>
                <div class="right">
                    <p>券名字</p>
                    <p>有效期：2019-05-20 至 2019-05-21</p>
                </div>
            </div>
            <div class="coupon-list">
                    <div class="left">
                        <p><span>￥</span><span>45.00</span></p>
                        <p>无使用门槛</p>
                    </div>
                    <div class="split">
                        <div class="line"></div>
                        <!-- <div class="split-right"></div> -->
                    </div>
                    <div class="right">
                        <p>券名字</p>
                        <p>有效期：2019-05-20 至 2019-05-21</p>
                    </div>
            </div>
        </div>
        
        <div class="invalid">
                <div class="coupon-list">
                        <div class="left">
                            <p><span>￥</span><span>45.00</span></p>
                            <p>无使用门槛</p>
                        </div>
                        <div class="split">
                            <div class="line"></div>
                            <!-- <div class="split-right"></div> -->
                        </div>
                        <div class="right">
                            <p>券名字</p>
                            <p>有效期：2019-05-20 至 2019-05-21</p>
                        </div>
                </div>
        </div>
    </div>


    <div class="footer">
        <p>
            <a href="#">店铺主页</a><a href="#">会员中心</a><a href="#">关注店铺</a>
        </p>
        <p>由 眼管家 提供技术支持</p>
    </div>
    
    <script>
        function isshowStroe(){
            let storelist = document.querySelector('.storelist')
            let mask = document.querySelector('.mask')
            storelist.style.display = (storelist.style.display=='none'?'block':'none')
            mask.style.display = (mask.style.display=='none'?'block':'none')
        }
        function checkStroe(e){
            let topP = document.querySelector('.storeName')
           topP.innerHTML =  e.srcElement.innerHTML
           isshowStroe()

        }
        function ifInvalid(status){
            let Valid = document.querySelector('.Valid')
            let invalid = document.querySelector('.invalid')
            let btndiv = document.querySelectorAll('.title div')

            if(status=='Valid'){
                invalid.style.display = 'none'
                Valid.style.display = 'block'
                btndiv[0].className ='active' 
                btndiv[1].className ='' 
            }else{
                Valid.style.display = 'none'
                invalid.style.display = 'block'
                btndiv[0].className ='' 
                btndiv[1].className ='active' 
            }
        }
    </script>
</body>
</html>